<template>
  <div class="page-box">
      <!-- 头部区域 -->
      <tool-bar>
        <el-form :inline="true"
                size="small">
          <el-form-item label="标题">
            <el-input v-model.trim="query.title"
                      placeholder="请输入标题"
                      clearable
                      @clear="initData"></el-input>
          </el-form-item>
          <el-form-item label="分类"
                          prop="cateid">
              <el-select clearable v-model="query.cateid">
                <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id">{{item.catename}}</el-option>
              </el-select>
            </el-form-item>
          <el-form-item label="时间">
             <el-date-picker
               style="width:220px;"
                v-model="query.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                      icon="el-icon-search"
                      @click="searchSubmit">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="searchCancel">重置</el-button>
          </el-form-item>
        </el-form>
      </tool-bar>

      <!-- 自定义表格组件 -->
      <custom-table  title="文章信息"
                    :btn-list="['export']"
                    :list="list"
                    @refresh="refreshListData"
                    :columns="columnsData"
                    :loading="loading">
        <template #btnbox>
          <el-button
          size="mini"
          plain
          @click="$router.push('/content_article/add')"
            v-permission="'ydd_article@add'"
          type="primary" icon="el-icon-plus">{{ $t("base.add") }}</el-button >
        </template>

        <!-- 创建时间 -->
        <template slot="create_date" slot-scope="scope">
          {{ scope.row.create_date | formateTime   }}
        </template>
        <!-- 图片列 -->
        <template slot="pic" slot-scope="scope">
          <img style="width:120px;" :src="showImage(scope.row.pic)" alt="">
        </template>
        <!-- 是否推荐 -->
        <template slot="ishot" slot-scope="scope">
          <el-switch :value="scope.row.ishot" :active-value="1" :inactive-value="0" >
          </el-switch>
        </template>
        <!-- 是否置顶 -->
        <template slot="istop" slot-scope="scope">
           <el-switch :value="scope.row.ishot" :active-value="1" :inactive-value="0" >
          </el-switch>
        </template>
        <!-- 文章状态 -->
        <template slot="status" slot-scope="scope">
          <el-tag v-if="scope.row.status*1 === 0">已发布</el-tag>
          <el-tag v-if="scope.row.status*1 === 1">已发布</el-tag>
          <el-tag v-if="scope.row.status*1 === 2">待审核</el-tag>
        </template>

        <!-- 操作列 -->
        <template slot="action"
                  slot-scope="scope">
          <el-button @click="edit({...scope.row})"
                    icon="el-icon-edit"
                    type="primary"
                    circle
                       v-permission="'ydd_article@update'"
                    size="small"></el-button>
          <el-button @click="del(scope.row.id)"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                       v-permission="'ydd_article@del'"
                    size="small"></el-button>
        </template>
      </custom-table>

      <!-- 分页组件 -->
      <Pagination :total="total"
                  :page.sync="page"
                  :page-sizes="pageSizes"
                  :limit.sync="limit"
                  @pagination="paginationChange" />
    </div>
</template>

<script>
import { getListData, delData } from '@/api/content/article'
import list from '@/mixins/list'
import { mapActions, mapState } from 'vuex'
// 默认查询参数
const defaultQuery = {
  title: '',
  cateid: '',
  time: []
}
export default {
  name: 'articleIndex',
  data () {
    return {
      // 查询参数
      query: { ...defaultQuery },
      // 表格显示数据
      columnsData: [
        { prop: 'id', label: 'ID', width: 80 },
        { prop: 'title', label: '标题', width: 280 },
        { prop: 'catename', label: '分类名', width: 80 },
        { prop: 'pic', label: '图片', width: 140, template: 'pic' },
        { prop: 'create_date', label: '创建时间', align: 'center', width: 120, template: 'create_date' },
        { prop: 'ishot', label: '是否推荐', width: 100, align: 'center', template: 'ishot' },
        { prop: 'istop', label: '是否置顶', width: 100, align: 'center', template: 'istop' },
        { prop: 'status', label: '文章状态', width: 100, align: 'center', template: 'status' }
      ],
      isShow: false
    }
  },
  mixins: [list],
  computed: {
    ...mapState('content', ['catelist', 'taglist']),
    start_time () {
      return this.query.time.length ? this.query.time[0].getTime() : ''
    },
    end_time () {
      return this.query.time.length ? this.query.time[1].getTime() : ''
    }
  },
  created () {
    if (this.catelist.length === 0) this.getCateList()
  },
  methods: {
    ...mapActions('content', ['getCateList']),
    // 初始化数据
    async initData () {
      try {
        this.loading = true
        const { page, limit } = this
        const { title, cateid } = this.query
        const { start_time, end_time } = this
        const { data, count } = await getListData({ start_time, end_time, title, cateid, page, limit })
        this.list = data
        this.total = count
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    // 搜索提交
    searchSubmit () {
      this.page = 1
      this.initData()
    },
    // 搜索重置
    searchCancel () {
      this.page = 1
      this.query = { ...defaultQuery }
      this.initData()
    },
    // 显示图片
    showImage (pic) {
      if (pic) {
        return process.env.VUE_APP_WEB_URL + (pic.split(',')[0])
      } else {
        return ''
      }
    },
    edit (row) {
      this.$router.push('/content_article/edit/' + row.id)
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm(this.$t('base.delConfimText'))
        await delData({ id })
        this.$message.success(this.$t('base.delSuccessText'))
        this.initData()
      } catch (e) {
        return this.$message.info(this.$t('base.cancelText'))
      }
    }
  }
}
</script>
<style scoped>
</style>
